// 基本场景 创建流程
import { useEffect } from 'react'
import * as THREE from 'three'
import './App.css'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
function App() {

  useEffect(() => {

    // 创建场景
    const scene = new THREE.Scene()

    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      45,//相机的角度
      window.innerWidth / window.innerHeight,//相机的宽高比
      0.1,//相机的近截面
      1000//相机的远截面
    )


    // 创建渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)//设置渲染尺寸
    document.body.appendChild(renderer.domElement)//将渲染器添加到文档中

    // 创建几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    // 创建材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    // 创建网格
    const cube = new THREE.Mesh(geometry, material)
    // 将网格添加到场景中
    scene.add(cube)

    // 设置相机位置
    camera.position.z = 5
    camera.position.y = 2
    camera.position.x = 2
    camera.lookAt(0,0,0)


    // 添加世界坐标辅助器
    const axesHelper = new THREE.AxesHelper(5)
    scene.add(axesHelper)


    // 创建轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement)
    // 阻尼
    controls.enableDamping = true
    // 旋转
    controls.enableRotate = true
    // 缩放
    controls.enableZoom = true
    // 设置阻尼系数
    controls.dampingFactor = 0.05
    // 自动旋转
    controls.autoRotate = true



    // 渲染
    renderer.render(scene, camera)

    // 渲染函数
    function animate() {
      requestAnimationFrame(animate)
      // 更新轨道控制器
      controls.update()
      // 旋转
      // cube.rotation.x += 0.01
      // cube.rotation.y += 0.01
      renderer.render(scene, camera)
    }
    // 调用渲染函数
    animate()

  }, [])
  return (
    <>
      <div>
        hello
      </div>
    </>
  )
}

export default App
